import React from 'react';
import {Checkbox, Switch} from 'antd';
import {WeaSearchGroup, WeaFormItem, WeaColorPicker, WeaSelect } from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import ELinkMode from './base/ELinkMode';

// 个人数据
export default class Content_DataCenter extends React.Component {
    state = {
        eSyncContent: this.props.eSyncContent,
        eSyncContentAll: false,
        eContentShowType: this.props.eContentShowType || '0',
        eShowContent4Person: this.props.eShowContent4Person
    };

    render() {
        const {eSyncContent, eSyncContentAll, eShowContent4Person} = this.state;

        let ESyncContent = <div></div>;
        if (this.props.eShareLevel == '2' && !!eSyncContent) {
            ESyncContent = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5b94ez`} label={getLabel(32328, '同步内容')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <Switch ecId={`${this && this.props && this.props.ecId || ''}_Switch@bwzgv4`} size="small" checked={eSyncContentAll} onChange={checked => this.setState({eSyncContentAll: checked})}/>
                </WeaFormItem>
            );
        }

        let eShowContent4PersonList = [];
        for (let key in eShowContent4Person) {
            if (eShowContent4Person.hasOwnProperty(key)) {
                eShowContent4PersonList.push(
                    <li style={{'line-height':'35px'}}>
                        <div style={{width: 140,
                            display: "inline-block"}}>
                        <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@z6b4x1@${key}`}
                            size="default"
                            checked={eShowContent4Person[key].checked}
                            onChange={
                                e => this.setState({
                                    eShowContent4Person: {
                                        ...eShowContent4Person, [key]: {...eShowContent4Person[key], checked: e.target.checked}
                                    }
                                })
                            }
                        >
                            {eShowContent4Person[key].label}
                        </Checkbox>
                        </div>
                        <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@e75lf5@${key}`}
                            value={eShowContent4Person[key].color}
                            onChange={
                                (value) => this.setState({
                                    eShowContent4Person: {
                                        ...eShowContent4Person, [key]: {...eShowContent4Person[key], color: value}
                                    }
                                })
                            }
                        />
                    </li>
                );
            }
        }

        let EShowContent4Person = (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@v5anyy`} label={getLabel(15935, '显示内容')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <ul ref="eShowContent4Person">
                    {eShowContent4PersonList}
                </ul>
            </WeaFormItem>
        );

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ty4swz`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@rjtqe6`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@8xtknk`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    <ELinkMode ecId={`${this && this.props && this.props.ecId || ''}_ELinkMode@mknqnj`} ref="eLinkMode" options={this.props.eLinkMode.options} value={this.props.eLinkMode.selected}/>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qfzg0n`} label={getLabel(520032, '展现方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@rjwjrr`}
                            options={[
                                {
                                    key: "0",
                                    showname: `${getLabel(520033, '图标')}`
                                },{
                                    key: "1",
                                    showname: `${getLabel(520034, '内容文字')}`
                                }
                            ]}
                            value={this.state.eContentShowType}
                            detailtype={3}
                            onChange={value => {
                                this.setState({eContentShowType: value});
                            }}
                        />
                    </WeaFormItem>
                    {ESyncContent}
                    {EShowContent4Person}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentLinkMode: this.refs['eLinkMode'].getSaveValues(),
            eContentSync: this.state.eSyncContent,
            eContentShowType: this.state.eContentShowType,
            eContentSyncAll: this.state.eSyncContentAll,
            eContentShow: this.state.eShowContent4Person
        };
    }
}